<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .nav {
            width: 600px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            padding-bottom: 16px;
        }
        .nav .message {
            width: 400px;
            height: 40px;
            font-size: 20px;
        }
        .nav .addTesk {
            width: 200px;
            height: 40px;
            text-align: center;
            background-color: orange;
            color: white;
            border: none;
            font-size: 20px;
        }
        .nav .addTesk:active {
            background-color: grey;
        }

        .container {
            width: 600px;
            margin: 0 auto;
            display: flex;
            justify-content: center;
        }
        .left, .right {
            width: 50%;
        }

        h3 {
            height: 40px;
            background-color: black;
            color: white;
            text-align: center;
            line-height: 40px;
        }
        .row {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-top: 10px;
        }
        .row span {
            width: 240px;
        }
        .row .delete {
            width: 40px;
            height: 36px;
        }
    </style>
</head>
<body>
    <div class="nav">
        <input type="text" class="message">
        <input type="text" value="新建任务" class="addTesk">
    </div>
    <div class="container">
        <div class="left">
            <h3>未完成</h3>
            <!-- <div class="row">
                <input type="checkbox">
                <span>吃饭</span>
                <input type="button" value="删除" class="delete">
            </div>     -->
        </div>
        <div class="right">
            <h3>已完成</h3>
        </div>
    </div>
    <script>
        let addTesk = document.querySelector('.addTesk');
        addTesk.onclick = function(){

            //1.获取输入框的内容
            let message = document.querySelector('.message');
            let mess = message.value;
            if(mess == ''){
                return;
            }

            //2.构建div节点
            let div = document.createElement('div');
            div.className = 'row';
            //选框
            let inputCheckB = document.createElement('input');
            inputCheckB.type = 'checkbox';
            div.appendChild(inputCheckB);
            //内容
            let span = document.createElement('span');
            span.innerHTML = mess;
            div.appendChild(span);
            //删除按钮
            let deleteButton = document.createElement('input');
            deleteButton.type = 'button';
            deleteButton.value = '删除';
            deleteButton.className = 'delete';
            div.appendChild(deleteButton);

            //2.插入div节点
            let left = document.querySelector('.left');
            left.appendChild(div);



            //3.事件状态的转变
            let right = document.querySelector('.right');
            inputCheckB.onclick = function(){
                if(inputCheckB.checked){
                    right.appendChild(div);
                }else{
                    left.appendChild(div);
                }
            }

            //4.删除操作
            deleteButton.onclick = function(){
                let ret = null;
                if(inputCheckB.checked){
                    ret = right;
                }else{
                    ret = left;
                }
                ret.removeChild(div);
            }
        }
    </script>
</body>
</html>